<template>
  <el-dialog
    :title="form.id ? '编辑部门' : '新增部门'"
    :visible="dialogShow"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-width="100px"
      :rules="formRules"
    >
      <el-form-item
        label="部门名称"
        prop="name"
      >
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item
        label="部门编码"
        prop="code"
      >
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item
        label="部门负责人"
        prop="manager"
      >
        <el-select
          v-model="form.manager"
          placeholder="请选择"
        >
          <el-option
            v-for="(item,index) in empList"
            :key="index"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        prop="introduce"
      >
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeptApi, addDeptApi, getDeptIdApi, updateDeptIdApi } from '@/api/departments.js'
import { getEmpApi } from '@/api/employees.js'
export default {
  props: ['dialogShow', 'currentId'],
  data() {
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      formRules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度 1-50 个字符', trigger: 'blur' },
          {
            validator: async(rule, value, cb) => {
              if (this.form.id) {
                const { data: res } = await getDeptApi()
                const array = res.data.depts.filter(item => {
                  return item.pid === this.form.pid
                })
                const bool = array.some(item => {
                  return (item.name === this.form.name && item.id !== this.form.id)
                })
                bool ? cb(new Error('该名字已经存在')) : cb()
              } else {
                const { data: res } = await getDeptApi()
                const array = res.data.depts.filter(item => {
                // 当前添加部门的同级部门
                  return item.pid === this.currentId
                })
                const bool = array.some(item => {
                  return item.name === value
                })
                bool ? cb(new Error('该名字已经存在')) : cb()
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度 1-50 个字符', trigger: 'blur' },
          {
            validator: async(rule, value, cb) => {
              if (this.form.id) {
                const { data: res } = await getDeptApi()
                const bool = res.data.depts.some(item => {
                  return item.code === value && item.id !== this.form.id
                })
                bool ? cb(new Error('编码已存在')) : cb()
              } else {
                const { data: res } = await getDeptApi()
                const array = res.data.depts.filter(item => {
                  return item.pid === this.currentId
                })
                const bool = array.some(item => {
                  return item.code === value
                })
                bool ? cb(new Error('编码已存在')) : cb()
              }
            },
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '长度 1-300 个字符', trigger: 'blur' }
        ]
      },
      empList: []
    }
  },
  created() {
    this.getEmpList()
  },
  methods: {
    async getDeptId(id) {
      const { data: res } = await getDeptIdApi(id)
      this.form = res.data
    },
    async getEmpList() {
      const { data: res } = await getEmpApi()
      this.empList = res.data
    },
    submit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return this.$message.error(this.form.id ? '编辑失败' : '添加失败')
        if (this.form.id) {
          await updateDeptIdApi(this.form)
        } else {
          await addDeptApi({
            ...this.form,
            pid: this.currentId === '604e115c7bfcfa45d019d3e9'
              ? '' : this.currentId
          })
        }
        this.$message.success(this.form.id ? '编辑成功' : '添加成功')
        this.$emit('update:dialogShow', false)
        this.form = {
          name: '',
          code: '',
          manager: '',
          introduce: ''
        }
        this.$emit('updateData')
      })
    },
    close() {
      this.$emit('update:dialogShow', false)
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style>
</style>
